<template>
	<div class="view">
		<my-navbar title="搜索"></my-navbar>
		<div>
			<div class="search_content">
				<!-- <text @click="cancelClick" style="padding-right:40px;" class="iconfont .icon-fanhui"></text> -->
				<div class="search_input_content">
					<text class="icon">&#xe62f;</text>
					<input placeholder="请输入商品名" v-model="goods" class="search_input" @input="searchGoods" :goods="goods"
					 return-key-type="search" @return="bindconfirm" :keyboard="keyUp" @focus="isFocus" @blur="isBlur"></input>
					<div class="icon_cancel" @click="empty" v-if="goods!=''">
						<text class="icon">&#xe6ce;</text>
					</div>
				</div>
			</div>
		</div>
		<div class="classification" v-if="isTitleShow==true && searchList.length!=0&&isProduct==true">
			<div @click="isNClick"><text :class="[nClick==false?'classification_tittle_number':'classification_tittle_number_click']">综合</text>

			</div>
			<div @click="isPClick">
				<text :class="[pClick==true?'tittle_price_click':'classification_tittle_price']">销量</text>
			</div>
			<div @click="sClick" class="sContent">
				<div>
					<text :class="[isScreen===true?'tittle_shai_click':'classification_tittle_shai']">筛选</text>
				</div>
				<div>
					<text :class="[isScreen===true?'icon_click':'icon']" >&#xe60a;</text>
				</div>
			</div>
			<div class="classification_tittle_line" @click="showProducyType">

				<text  v-if="showType==='transverse'" class="icon">&#xe699;</text>
				<text v-if="showType==='portrait'" class="icon">&#xe7a0;</text>
			</div>
		</div>
		<list v-if="showType==='portrait'&&isTitleShow==true && searchList.length!=0&&isProduct==true">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell class="column_box">
				<div v-for="item in searchList">
					<column v-if="item.point == 0" :product="item"></column>
          <columnProduct v-else :product="item"></columnProduct>
        </div>
			</cell>
			<loading v-if="searchList.length>=5" class="loading" @loading="onloading"
			         :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text" style="padding-bottom:40px">加载中...</text>
			</loading>
		</list>
		<list v-if="showType==='transverse'&&isTitleShow==true && searchList.length!=0&&isProduct==true">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown"
			         :display="refreshing ? 'show' : 'hide'">
			    <text class="indicator-text">{{refreshTitle}}</text>
			</refresh>
			<cell v-for="item in searchList">
				<div class="row_box">
					<row :product="item"></row>
				</div>
			</cell>
			<loading v-if="searchList.length>=5" class="loading" @loading="onloading"
			         :display="loadinging ? 'show' : 'hide'">
			    <text class="indicator-text" style="padding-bottom:40px">加载中...</text>
			</loading>
		</list>
		<div v-if="isNullShow===false&&searchList.length==0">
			<searchHistory :historyItem="historyItem" :isTitleShow="isTitleShow" :status="status" @removeItem="removeItem"
			 @historyClick='historyClick'></searchHistory>
		</div>
		<list v-if="goods!=''&&searchList.length>0&&isTitleShow==false">
			<cell>
				<div class="search_list">
					<div v-for="item in searchList" :key="item.id" class="search_item" @click="toItem(item.name)"><text>{{item.name}}</text></div>
				</div>
			</cell>

		</list>

		<searchNull v-if="isNullShow === true&&this.searchList.length==0"></searchNull>
		<searchGoods class="search-goods" :goods="goods" :searchList="searchList" :max="maxPrice" :min="minPrice" :brandList="brandList"
		 @hiddenClick="hiddenClick" @loadProduct="loadProduct" v-if="sIsShow==true"></searchGoods>
	</div>
</template>
<script>
	const storage = weex.requireModule('storage')
	import searchHistory from './searchHistory/searchHistory.vue'
	import searchNull from './searchNull/searchNull.vue'
	import column from '../../../components/product/column.vue'
  import columnProduct from '../../../components/productCoupons/column.vue'
  import row from '../../../components/product/row.vue'
	import searchGoods from './searchGoods/searchGoods.vue'
	import {
		list
	} from '../../../api/product.js'
    import myNavbar from '../../../components/myNavbar/myNavbar.vue'
	export default {
		name: 'searchIndex',
		data() {
			return {
				keyUp: false,
				brandList: [],
				isProduct: false,
				maxPrice: '',
				minPrice: '',
				isScreen: false,
				pageNum: 1,
				goods: '',
				brandId: '',
				loadinging: false,
				sIsShow: false,
				pClick: false,
				refreshing: false,
				searchList: [],
				historyList: [],
				historyItem: [],
				focus: false,
				status: false,
				length: 1,
				showType: 'portrait',
				nClick: true,
				isNullShow: false,
				isTitleShow: '',
				isShow: false,
				refreshTitle:'释放刷新页面...'
			}
		},
		created() { // 在实例创建完成后被立即调用
			// this.removeItem()
			this.initIconFont()
			this.getAll()
			setTimeout(() => {
				this.getStorage()
			}, 100)
			setTimeout(() => {
				if (this.historyList.length > 0) {
					this.status = true
				} else {
					this.status = false
				}
			}, 200)

		},
		mounted() {

		},
		methods: {
			showProducyType() {
				if (this.showType == 'transverse') {
					this.showType = 'portrait'
				} else if (this.showType == 'portrait') {
					this.showType = 'transverse'
				}

			},
			isPClick() {
				this.pClick = true
				this.nClick = false
				if (this.pClick == true) {
					list({
						maxPrice: this.maxPrice,
						minPrice: this.minPrice,
						brandId: this.brandId,
						name: this.goods,
						totalSale: 'totalSale'
					}).then(res => {
            this.searchList = res.data.data

					})
				}

			},
			isNClick() {
				this.nClick = true
				this.pClick = false
				list({
					maxPrice: this.maxPrice,
					minPrice: this.minPrice,
					brandId: this.brandId,
					name: this.goods
				}).then(res => {
					this.searchList = res.data.data

				})

			},
			getAll() {
				storage.getAllKeys(event => {
					if (event.result === 'success') {
						this.historyList = event.data
					}
				})


			},
			isBlur() {
				this.keyUp = false
				console.log(this.keyUp)
			},
			isFocus() {

				this.keyUp = true
			},
			sClick() {
				this.sIsShow = true
			},
			hiddenClick() {
				this.sIsShow = false
			},
			historyClick(data) {
				var hash = {};
				this.brandList = []
				this.searchList = []
				this.goods = data

				list({
					name: data
				}).then(res => {
					this.searchList = res.data.data
					if (res.data.data.length > 0) {
						res.data.data.forEach(item => {
							let brand = {
								brandId: item.brandId,
								brandName: item.brandName,
								isActive: false
							}
							this.brandList.push(brand)
						})
						this.brandList = this.brandList.reduce((item, next) => {
							hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
							return item
						}, [])
					}
					this.historyList.push(this.historyList.length + 1)
					storage.setItem(this.historyList.length, this.goods, event => {
						this.getStorage()
					})
					if (this.searchList.length > 0) {
						this.isTitleShow = true
						this.isProduct = true
					} else {
						this.isNullShow = true
					}
				})
			},
			toItem(data) {
				var hash = {};
				this.brandList = []
				this.setStorage(data)
				this.goods=data
				list({
					name: data
				}).then(res => {
					this.searchList = res.data.data
					res.data.data.forEach(item => {
						let brand = {
							brandId: item.brandId,
							brandName: item.brandName,
							isActive: false
						}
						this.brandList.push(brand)
					})
					this.brandList = this.brandList.reduce((item, next) => {
						hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
						return item
					}, [])
					this.historyList.push(this.historyList.length + 1)
					storage.setItem(this.historyList.length, this.goods, event => {
						this.getStorage()
					})
					this.isTitleShow = true
					this.isProduct = true
					this.getStorage()
				})
			},
			loadProduct(data) {
				var hash = {};
				this.brandList = []
				this.searchList = []
				this.minPrice = data.minPrice
				this.maxPrice = data.maxPrice
				this.brandId = data.brandId
				if(data.maxPrice!=''||data.minPrice!=''||data.brandId!=''){
					this.isScreen=true
				}
				list({
					name: this.goods,
					maxPrice: data.maxPrice,
					minPrice: data.minPrice,
					brandId: data.brandId,
				}).then(res => {
					this.searchList = res.data.data
					res.data.data.forEach(item => {
						let brand = {
							brandId: item.brandId,
							brandName: item.brandName,
							isActive: false
						}
						this.brandList.push(brand)
					})
					this.brandList = this.brandList.reduce((item, next) => {
						hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
						return item
					}, [])

				})
			},
			loadingProduct() {
				var hash = {};
				if (this.pageNum != 1) {
					list({
						name: this.goods,
						pageNum: this.pageNum,
						maxPrice: this.maxPrice,
						minPrice: this.minPrice,
						brandId: this.brandId,
					}).then(res => {
						res.data.data.forEach(item => {
							this.searchList.push(item)
						})
						res.data.data.forEach(item => {
							let brand = {
								brandId: item.brandId,
								brandName: item.brandName,
								isActive: false
							}
							this.brandList.push(brand)
						})
						this.brandList = this.brandList.reduce((item, next) => {
							hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
							return item
						}, [])
					})
				} else {
					list({
						name: this.goods,
						pageNum: this.pageNum,
						maxPrice: this.maxPrice,
						minPrice: this.minPrice,
						brandId: this.brandId,
					}).then(res => {
						this.searchList = res.data.data
						res.data.data.forEach(item => {
							let brand = {
								brandId: item.brandId,
								brandName: item.brandName,
								isActive: false
							}
							this.brandList.push(brand)
						})
						this.brandList = this.brandList.reduce((item, next) => {
							hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
							return item
						}, [])
					})
				}

			},
			searchGoods() {
				var hash = {};
				this.goods = this.goods.replace(/\s+/g, '')
				this.brandList = []
				this.searchList = []
				if (this.goods != '' || this.goods.length != 0) {
					list({
						name: this.goods
					}).then(res => {
						this.searchList = res.data.data
						res.data.data.forEach(item => {
							let brand = {
								brandId: item.brandId,
								brandName: item.brandName,
								isActive: false
							}
							this.brandList.push(brand)
						})
						this.brandList = this.brandList.reduce((item, next) => {
							hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
							return item
						}, [])
						if (this.searchList.length > 0) {
							this.isTitleShow = false
						}
					})
				} else if (this.goods.length == 0 || this.goods == '') {
					console.log('------------')
					this.isNullShow = false
					this.searchList = []
				}
			},
			empty() {
				this.goods = ''
				this.isNullShow = false
				this.searchList = []
				this.brandList = []
				this.getAll()
				this.getStorage()
			},
			removeItem() {
				this.length = 1
				this.status = false
				this.historyList.forEach(item => {
					storage.removeItem(item, event => {
						this.historyItem = []
						this.historyList = []
					})
				})
			},
			getStorage() {
				var hash = {};
				this.historyItem = []
				if (this.historyList.length > 0) {
					this.historyList.forEach(item => {
						storage.getItem(item, event => {
							this.historyItem.unshift(event.data)
							if (this.historyItem.length > 1) {
								for (var i = 0; i < this.historyItem.length; i++) {
									for (var j = i + 1; j < this.historyItem.length; j++) {
										if (this.historyItem[i] == this.historyItem[j]) {
											this.historyItem.splice(j, 1)
											j--;
										}
									}
								}
							}
						})
					})
				}


			},
			onloading(event) {
			    var _this = this
			    this.loadinging = true
			    setTimeout(() => {
			        if (_this.loading == true) {
			            _this.pageNum = this.pageNum + 1;
			            _this.loadingProduct()
			        }
			        _this.loadinging = false
			    }, 2000)
			},
			onrefresh(event) {
			    var _this = this
			    this.refreshing = true
				this.refreshTitle = '加载中...'
			    setTimeout(() => {
			        _this.pageNum = 1;
			        _this.brandList = []
			        _this.loadingProduct()
			        _this.refreshing = false
			    }, 2000)
			},
			onpullingdown(event) {
				this.refreshTitle = '释放刷新页面...'
			},
			setStorage(data) {
				this.historyList.push(this.historyList.length + 1)
				storage.setItem(this.historyList.length, data, event => {
					this.getStorage()
					this.length += 1
				})

			},
			bindconfirm(e) {
        var hash = {};
				list({
					name: e.value
				}).then(res => {
					this.searchList = res.data.data
					res.data.data.forEach(item => {
						let brand = {
							brandId: item.brandId,
							brandName: item.brandName,
							isActive: false
						}
						this.brandList.push(brand)
					})
					this.brandList = this.brandList.reduce((item, next) => {
						hash[next.brandName] ? '' : hash[next.brandName] = true && item.push(next);
						return item
					}, [])
				})
				this.status = true
				if (this.searchList.length == 0 && this.goods.length != 0) {
					this.isNullShow = true
					this.isTitleShow = false
					this.isProduct = false
				} else if (this.goods.length != 0 && this.searchList.length != 0) {
					this.isTitleShow = true
					this.isNullShow = false
					this.isProduct = true
				}

				this.goods = this.goods.replace(/\s+/g, '')
				if (this.goods.length > 0) {
					this.historyList.push(this.historyList.length + 1)
					storage.setItem(this.historyList.length, this.goods, event => {
						this.getStorage()
					})
				}

			}
		},
		components: {
			searchHistory,
			searchNull,
			column,
			row,
			searchGoods,
            myNavbar,
      columnProduct
		},
	}
</script>

<style scoped>
	.view {
		background-color: rgb(248, 248, 248);
	}

	.search-goods {
		position: absolute;
		right: 0;
		bottom: 0;
		top: 0;
		width: 750px;
		flex: 1;
	}

	.indicator {
		margin-top: 16px;
		height: 40px;
		width: 40px;
		color: black;
	}

	.refresh {
		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}

	.loading {

		width: 750px;
		display: -ms-flex;
		display: -webkit-flex;
		display: flex;
		-ms-flex-align: center;
		-webkit-align-items: center;
		-webkit-box-align: center;
		align-items: center;
	}

	.search_content {
		width: 700px;
		flex-direction: row;
		display: flex;
        margin-left: 20px;
		padding-right: 30px;
		height: 90px;
		align-items: center;

	}

	.classification_tittle_line {
		width: 50px;
		margin-left: 100px;
	}

	.icon {
		font-family: iconfont2;
		margin-top: 15px;
		width: 50px;
		height: 50px;
		font-size: 39px;
		color: rgba(42, 42, 54);
		opacity: 0.3;
	}
	.icon_click {
		font-family: iconfont2;
		margin-top: 15px;
		width: 50px;
		height: 50px;
		font-size: 39px;
		color:  #FF6633;
		opacity: 0.3;
	}

	.sContent {
		justify-content: center;
		align-items: center;
		display: flex;
		flex-direction: row;
	}

	.search_input_content {
		padding-left: 20px;
		width: 700px;
		height: 64px;
		background-color: white;
		opacity: 0.95;
		border-radius: 16px;
		display: flex;
		flex-direction: row;
		align-items: center;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(212, 215, 220, 1);
	}

	.column_box {
		width: 750px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: space-between;
		padding: 20px;
	}

	.row_box {
		margin-top: 20px;
	}


	.cancel_text {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		margin-left: auto;
	}

	.search_input {
		width: 545px;
		height: 64px;
		margin-left: 0px;
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		opacity: 0.89;
	}

	.icon_cancel {
		color: #D4D7DC;
		margin-left: 30px;
		opacity: 0.95;
	}

	.search_list {
		padding-top: 20px;
		width: 700px;
		margin-left: 27px;
		display: flex;
		flex-direction: column;
		margin-bottom: 10px;
	}

	.search_item {
		display: flex;
		flex-direction: column;
		justify-content: center;
		padding-top: 20px;
		padding-bottom: 20px;
		/*margin-bottom: 20px;*/
		border-bottom-width: 1px;
		border-color: rgba(140, 140, 142, 0.3);
		border-style: solid;
		font-size: 28px;
		font-weight: 400;
		color: rgba(140, 140, 142, 1);
	}

	.classification {
		height: 88px;
		width: 750px;
		border-bottom-width: 1px;
		border-color: rgba(232, 234, 237, 1);
		border-style: solid;

		display: flex;
		flex-direction: row;
		align-items: center;

	}

	.classification_tittle_price {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		margin-right: 111px;
	}

	.tittle_price_click {
		font-size: 28px;
		font-weight: 400;
		color: #FF6633;
		margin-right: 111px;
	}

	.classification_tittle_shai {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);

	}

	.tittle_shai_click {
		font-size: 28px;
		font-weight: 400;
		color: #FF6633;
	}

	.classification_tittle_number {
		font-size: 28px;
		font-weight: 400;
		color: rgba(26, 26, 30, 1);
		margin-right: 126px;
		margin-left: 67px;
	}

	.classification_tittle_number_click {
		font-size: 28px;
		font-weight: 400;
		color: #FF6633;
		margin-right: 126px;
		margin-left: 67px;
	}
	.icon_paixu {
		font-size: 20px;
		margin-left: 8px;
	}

	.icon_shaixuan {
		margin-left: 8px;
	}
	.indicator-text {
	    color: #888888;
	    font-size: 22px;
	    text-align: center;
		padding-top: 20px;
	}
</style>
